<template>
  <div>
      
      <el-row>
        <el-col :span="20">
          <el-breadcrumb separator="/" style="height:10px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>酒店人员权限管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
         <el-col :span="4">
           <el-button type="warning" size="mini" @click="addStaff">添加</el-button>
           <el-button type="danger" size="mini" @click="delAllStaffByDirFn">批量删除</el-button>
           
         </el-col>
      </el-row>
      <el-table
        :data="pageinfo.list"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="username"
          label="姓名"
          width="180">
        </el-table-column>

        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            {{scope.row.gender == 0 ? '男':'女'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="iphone"
          label="手机号"
          width="180">
        </el-table-column>
        
        <el-table-column
          prop="idnumber"
          label="证件号码"
          width="180">
        </el-table-column>


        <el-table-column
          prop="rose.rname"
          label="角色"
          width="180">
        </el-table-column>

        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            {{scope.row.state == 0 ? '已删除':'未删除'}}
          </template>
        </el-table-column>

        <el-table-column label="管理操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row.hid)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.hid)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="staffVo.pageNum"
      :page-sizes="[3, 5, 7, 10]"
      :page-size="staffVo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.total">
    </el-pagination>

    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%">
       <el-form :model="staff" label-width="80px">
            <el-form-item label="用户名" prop="uname">
            <el-input v-model="staff.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
            <el-input v-model="staff.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item label="确认密码">
            <el-input v-model="staff.quedingupassword" placeholder="请再次输入密码" show-password></el-input>
            </el-form-item> -->
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="staff.gender">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号"  prop="iphone">
            <el-input v-model="staff.iphone" placeholder="请输入手机号"></el-input>
            </el-form-item>
           
            <el-form-item label="证件号码" prop="idnumber">
            <el-input v-model="staff.idnumber" placeholder="请输入证件号码"></el-input>
            </el-form-item>

             <el-form-item label="角色">
                <el-select v-model="staff.roseid" placeholder="请选择角色">
                    <el-option v-for="(rose,index) in roselist" :key="index" :label="rose.rname" :value="rose.rid"></el-option>
                </el-select>
              </el-form-item>
            
            <el-form-item>
            <el-button type="success" @click="addStaffOld">添加</el-button>
            <el-button @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>



    <el-dialog
      title="修改"
      :visible.sync="dialogVisible1"
      width="30%">
       <el-form :model="staff" label-width="80px">
            <el-form-item label="用户名" prop="uname">
            <el-input v-model="staff.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
            <el-input v-model="staff.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item label="确认密码">
            <el-input v-model="staff.quedingupassword" placeholder="请再次输入密码" show-password></el-input>
            </el-form-item> -->
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="staff.gender">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号"  prop="iphone">
            <el-input v-model="staff.iphone" placeholder="请输入手机号"></el-input>
            </el-form-item>
           
            <el-form-item label="证件号码" prop="idnumber">
            <el-input v-model="staff.idnumber" placeholder="请输入证件号码"></el-input>
            </el-form-item>

             <el-form-item label="角色">
                <el-select v-model="staff.roseid" placeholder="请选择角色">
                    <el-option v-for="(rose,index) in roselist" :key="index" :label="rose.rname" :value="rose.rid"></el-option>
                </el-select>
              </el-form-item>
            
            <el-form-item>
            <el-button type="success" @click="updateStaffFN">修改</el-button>
            <el-button @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {findAllStaffForpage,findAllRose,addStaff,findOneStaffByhid,updateStaff,delAllStaffByDir,delStaffByHid} from '../api'
export default {
  data() {
    return {
      staffVo : {
        pageNum : 1,
        pageSize : 5
      },
      pageinfo : {},
      dialogVisible : false,
      dialogVisible1 : false,
      staff : {},
      roselist : [],
      dir : ''
    }
  },
  created() {
    this.findAll();
  },
  methods: {
    async findAll(){
      let {data:baseRefault} = await findAllStaffForpage(this.staffVo)
      this.pageinfo = baseRefault.data
    },
    async addStaff(){
          var staffname = sessionStorage.getItem('staffid')
          if(staffname == 'admin'){
            this.staff = {}
            let {data:baseRefault} = await findAllRose()
            this.roselist = baseRefault.data
            this.dialogVisible = true
          }else{
            this.$message.error('您无权添加酒店人员操作！请联系管理员！')
          }
    },
    async addStaffOld(){
      let {data:baseRefault} = await addStaff(this.staff)
      this.$message.success(baseRefault.message)
      this.dialogVisible = false
      this.findAll();
    },
    quxiao(){
      this.$message.warning('取消操作')
      this.dialogVisible = false
      this.dialogVisible1 = false
    },
    handleSizeChange(val) {
      this.staffVo.pageNum = 1
      this.staffVo.pageSize = val
      this.findAll();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.staffVo.pageNum = val
      this.findAll();
      // console.log(`当前页: ${val}`);
    },
    async handleEdit(index,hid){
      var staffname = sessionStorage.getItem('staffid')
      if(staffname == 'admin'){
        let {data:baseRefault1} = await findAllRose()
        this.roselist = baseRefault1.data
        let {data:baseRefault} = await findOneStaffByhid(hid)
        this.staff = baseRefault.data
        this.dialogVisible1 = true
      }else{
        this.$message.error('您无权修改酒店成员信息！请联系管理员！')
      }
    },
    async updateStaffFN(){
      let {data:baseRefault} = await updateStaff(this.staff)
      this.$message.success(baseRefault.message)
      this.dialogVisible1 = false
      this.findAll();
    },
    handleSelectionChange(val) {
      var str = ''
      val.forEach(item => {
        str+=item.hid + ","
      });
      this.dir = str
    },
    delAllStaffByDirFn(){
      var staffname = sessionStorage.getItem('staffid')
      if(staffname == 'admin'){
        this.$confirm('此操作将永久删除这些文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.info(this.dir)
          let {data:baseRefault} = await delAllStaffByDir(this.dir)
          this.$message.success(baseRefault.message)
          this.findAll();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除'
          });          
        });
      }else{
        this.$message.error('您无权进行注销酒店人员操作！请联系管理员！')
      }
    },
    handleDelete(index,hid){

          var staffname = sessionStorage.getItem('staffid')
          if(staffname == 'admin'){
            this.$confirm('删除文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async () => {
              let {data:baseRefault} = await delStaffByHid(hid)
              this.$message.success(baseRefault.message)
              this.findAll();
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
          }else{
            this.$message.error('您无权进行注销酒店人员操作！请联系管理员！')
          }
    }
  },
}
</script>

<style>

</style>